---
import type { CollectionEntry } from 'astro:content'

interface Props {
  testimonial: CollectionEntry<'testimonials'>
}

const testimonial = Astro.props.testimonial.data
---

<a
  href={testimonial.link}
  rel="external"
  class="mb-6 inline-block h-full w-full rounded-md border border-white/10 bg-white/5 p-4 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl"
>
  <div class="flex flex-col gap-6">
    <div class="flex gap-6">
      <img
        src={testimonial.image}
        alt={testimonial.name + 'profile photo'}
        class="h-12 w-12 rounded-full object-cover"
      />
      <div class="grow">
        <p class="mb-0">{testimonial.name}</p>
        <p class="text-faded text-sm font-normal">{testimonial.title}</p>
      </div>
    </div>
    <blockquote cite={testimonial.link}>
      <p class="text mt-0 text-base font-normal">{testimonial.contents}</p>
    </blockquote>
  </div>
</a>
